<template>
    <!-- <div>
        <p>
            用户名: <input v-model="userInfo.name" type="text">
        </p>
        <p>
            性别:
            <input v-model="userInfo.sex" name="aaa" type="radio">
            <input v-model="userInfo.sex" name="aaa" type="radio">
        </p>
        <p>
            爱好:
            <input v-model="userInfo.like" type="checkbox"> 篮球
        </p>
        <p>
            备注: <textarea v-model="userInfo.mark" name="" id="" cols="30" rows="10"></textarea>
        </p>
        <p>
            城市: <select v-model="userInfo.city" name="" id="">
                <option value="11">天津</option>
                <option value="22">北京</option>
            </select>
        </p>
        <button @click="btn">提交</button>
    </div> -->
    <!-- <input v-model="num" type="text"> -->
    <!-- <div>
        <p>
            {{ count }}
        </p>
        <p>
            {{ count }}
        </p>
        <p>
            {{ count }}
        </p>
        <p>
            {{ count }}
        </p>
        <p>
            {{ count }}
        </p>
    </div> -->

    <div>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                <input v-model="item.check" type="checkbox">
                {{ item.title }} ---- {{ item.price }}  ----
                <button @click="item.count -= 1">减</button>
                {{ item.count }}
                <button @click="item.count += 1">加</button>
            </li>
        </ul>

        <p>
            <input v-model="allCheck" type="checkbox">
            全选
        </p>
        <p>
            总数量: {{ allCount }}
        </p>
        <p>
            总价格: {{ allPrice }}
        </p>
    </div>
</template>
<script setup> 
import { reactive, computed, watch, ref } from 'vue'
// computed  计算属性 （1.缓存   2.当依赖的属性发生改变以后，会重新进行计算） 依赖的属性：
// ? 多次使用    
// watch     侦听器

const userInfo = reactive({})

const btn = () => {
    console.log(userInfo)
}

const sum = () => {
    console.log('函数执行')
    return 1 + 1
}


const num = ref(10)
const count = computed(() => {
    console.log('我是计算属性')
    return '$' + num.value + '.00'
})

// 全选
const allCheck = ref(true)

const list = ref([
    {
        title: "商品1",
        price: 10,
        count: 1,
        check: true
    },
    {
        title: "商品2",
        price: 20,
        count: 2,
        check: true
    },
    {
        title: "商品3",
        price: 30,
        count: 3,
        check: true
    }
])

const allCount = computed(() => {
    // prev ==> 上一次的结果（如果是第一次，读取默认值）
    // next ==> 当前循环这一项
    // 0 + 1 = 1
    // 1 + 2 = 3
    // 3 + 3 = 6
    // reduce((prev, next)=> {
    // 
    // }, 初始值)
    return list.value.reduce((prev, next) => {
        // true   1
        // false  2
        // true   3

        // 0 + 1 = 1
        // 1
        // 1 + 3 = 4

        if (next.check) {
            return prev + next.count
        } else {
            return prev
        }
    }, 0)
})

const allPrice = computed(() => {
    return list.value.reduce((prev, next) => {
        if (next.check) {
            return prev + next.count * next.price
        } else {
            return prev
        }
    }, 0)
})
</script>
<style scoped>
</style>